<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游</title>

    <style>
     body,
     ul{
         margin:0;
         padding:0;
     }
    
      /*背景图片相关样式*/
     .main{
         width:100%;
         height: 786px;
         overflow: hidden;

     }
    
    .main>.bg{
        width:3920px;
        height: 620px;
        margin-left: -1920px;
        background-image: url("../image/bg.jpg");
        background-repeat: repeat-x;
        animation-name: bg;
        animation-duration: 30s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;

    }
@keyframes bg{
    from{
        margin-left: -1920px;
    }
    to{
        margin-left: 0px;
    }
} 
/*四个人物的动画*/
  .content{
      width:950px;
      position: absolute;
      left:50%;
      margin-left: -475px;
     
      bottom:-80px;

  }
  .content>ul::after{
      display: block;
      content: "";
      clear:both;
      }
      .content>ul>li{
          float: left;
          width: 200px;
          margin-right: 30px;
          overflow: hidden;
      }
      .content>ul>li>img{
    width: 1600px;
    animation-name:people;
    animation-duration: 1s;
    animation-timing-function: steps(8);
    animation-iteration-count: infinite;


      }
      @keyframes people{
          from{
              margin-left: 0;
          }
          to{
              margin-left: -1600px;
          }
      }
    </style>
</head>
<body>
    <div class="main">
        <div class="bg">

        </div>
    </div>
    <div class="content">
        <ul>
            <li><img src="../image/wk.png" alt="图片丢失"></li>
            <li><img src="../image/bj.png" alt="图片丢失"></li>
            <li><img src="../image/ts.png" alt="图片丢失"></li>
            <li><img src="../image/ss.png" alt="图片丢失"></li>
        </ul>
    </div>
</body>
</html>